<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.user" placeholder="公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="状态">
                            <el-option label="待开通" value="tobe"></el-option>
                            <el-option label="正常" value="normal"></el-option>
                            <el-option label="冻结" value="freeze"></el-option>
                            <el-option label="注销" value="logout"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="add">创建</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row>
                <el-table-column label="公司名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.company }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="省">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.province }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="市">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="县">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.district }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="详细地址">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.site }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state | state }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.creTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="orderPage.pageSize" :total="total" style="float:right;">
            </el-pagination>

        </el-row>

        <el-dialog title="创建机构" :visible.sync="addUsersVisible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="addForm" ref="addForm" status-icon label-width="100px" class="addcity" :rules="addFormRules" style="text-align:left">
                <el-form-item label="机构名称" prop="company">
                    <el-col :span="18">
                        <el-input v-model="addForm.company"></el-input>
                    </el-col>
                </el-form-item>
                 <el-form-item label="机构联系人" prop="principal">
                    <el-col :span="18">
                        <el-input v-model="addForm.principal"></el-input>
                    </el-col>
                </el-form-item>
                 <el-form-item label="联系方式" prop="mobile">
                    <el-col :span="18">
                        <el-input v-model="addForm.mobile"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="省市区" prop="city">
                    <el-col :span="24">
                        <area-select :level='2' type="all" v-model='city'></area-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="详细地址" prop="site">
                    <el-col :span="22">
                       <el-input v-model="addForm.site"></el-input>
                    </el-col>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addUsersVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="submitAdd('addForm')" :loading="addLoading">确 定</el-button>
            </div>
        </el-dialog>

         <el-dialog title="编辑机构" v-if="editUsersVisible" :visible.sync="editUsersVisible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="editForm" ref="addForm" status-icon label-width="100px" class="addcity" :rules="addFormRules" style="text-align:left">
               <el-form-item label="机构名称" prop="company">
                    <el-col :span="18">
                        <el-input v-model="editForm.company"></el-input>
                    </el-col>
                </el-form-item>
                 <el-form-item label="机构联系人" prop="principal">
                    <el-col :span="18">
                        <el-input v-model="editForm.principal"></el-input>
                    </el-col>
                </el-form-item>
                 <el-form-item label="联系方式" prop="mobile">
                    <el-col :span="18">
                        <el-input v-model="editForm.mobile" ></el-input>
                    </el-col>
                </el-form-item>
                 <el-form-item label="状态">
                        <el-select v-model="vals" placeholder="状态">
                            <el-option label="正常" :value="1"></el-option>
                            <el-option label="冻结" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="省市区" prop="editFormCity">
                    <el-col :span="24">
                        <area-select :level='2' type='all'  v-model='editFormCity'></area-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="详细地址" prop="site">
                    <el-col :span="22">
                       <el-input v-model="editForm.site"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editUsersVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="submitEdit('addForm')" :loading="editLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            addLoading: false,
            formInline: {},
            tableData: [],
            orderPage: {
                pageNo: 1,
                pageSize: 10,
            },
            total: 1,

            //创建机构
            addForm: {},
            addUsersVisible: false,
            addFormRules: {
                company: [
                    { required: true, message: '请输入机构名称', trigger: 'blur' }
                ],
                principal:[
                    { required: true, message: '请输入机构联系人', trigger: 'blur'}
                ],
                mobile:[
                    { required: true, message: '请输入正确联系方式', trigger: 'blur', pattern:/^1[3|4|5|7|8|9]\d{9}$/}
                ],
                site:[
                    { required: true, message: '请输入机构详细地址', trigger: 'blur'}
                ]
            },
            city:[
                '110000', '110100', '110101'
            ], 
              
            vals:'',
            //编辑机构
            editLoading:false,
             editUsersVisible: false,
            editForm: {

            },
            editFormCity:[
                 '110000', '110100', '110101'
            ],
        
        }
    },
    filters: {
        state(val) {
            switch (val) {
                case 1:
                    return '正常';
                    break
                case 2:
                    return '冻结';
                    break
            }
        }
    },
    created() {
        this.orderList();
        this.$watch("editUsersVisible", function (newValue, oldValue) {
            if(this.editUsersVisible==false){
                    this.editFormCity=['110000', '110100', '110101']
            }
            
        })
    },
    methods: {
        orderList() {
            this.listLoading = true;
            var obj = {
                data: {
                    company: this.formInline.company,
                    pageNo: this.orderPage.pageNo,
                    pageSize: this.orderPage.pageSize,
                }
            };
            this.$http('/sys/listOrganization', obj).then(resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                }
                this.listLoading = false;
            })
        },
        handleCurrentChange(val) {
            this.orderPage.pageNo = val;
            this.orderList();
        },
        onSubmit() {
            this.orderList();
        },

        add() {//添加角色
            // if(!this.$store.state.routes.routes.xtRoleAdd){
            // this.$message({
            //     message: '无权限',
            //     type: 'error'
            // })
            // return
            // }
            this.addForm = {},
            
            this.addUsersVisible = true
        },
        submitAdd(fn) {
            this.$refs[fn].validate((valid) => {
                if (valid) {
                   
                 let chufavals = [];
                  let chufaKeys = [];
                    if(this.city.length==0){
                        this.$message({
                                message: '请选择省市区',
                                type: 'error'
                            })
                            return false
                    }
                    for (var p in this.city) {
                        for (var i in this.city[p]) {
                             chufaKeys.push(i);
                            chufavals.push(this.city[p][i])
                        }
                    }
                    this.addForm.province=chufavals[0],
                    this.addForm.dtNo= chufaKeys.join('-')
                    this.addForm.city=chufavals[1],
                    this.addForm.district=chufavals[2],
                    this.addLoading = true;
                    var obj = {
                        data: this.addForm
                    }
                    this.$http('/sys/addOrganization', obj).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: '新建成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.orderList()
                        this.editLoading = false;
                        this.addUsersVisible = false;
                    });

                } else {
                    return false;
                }
            });
        },
        handleEdit(index, row) {
            this.editForm.company=row.company;
             this.editForm.principal=row.principal;
            this.editForm.mobile=row.tel;
            
            if(row.dtNo){
                this.editFormCity=(row.dtNo).split('-');
            }
             this.editForm.site=row.site;
             this.editForm.id=row.id;
            this.vals=row.state;
            this.editUsersVisible = true;
        },
        submitEdit(fn) {
            this.$refs[fn].validate((valid) => {
                if (valid) {
                    if(this.editFormCity.length==0){
                        this.$message({
                                message: '请选择省市区',
                                type: 'error'
                            })
                            return false
                    }
                     let chufavals = [];
                    let chufaKeys = [];
                    for (var p in this.editFormCity) {
                        for (var i in this.editFormCity[p]) {
                             chufaKeys.push(i);
                             chufavals.push(this.editFormCity[p][i])
                        }
                    }
                    this.editForm.province=chufavals[0],
                    this.editForm.dtNo= chufaKeys.join('-')
                    this.editForm.city=chufavals[1],
                    this.editForm.district=chufavals[2],
                    this.editForm.state=this.vals;
                    this.editLoading = true;
                    var obj = {
                        data: this.editForm
                    }
                    this.$http('/sys/editOrganization', obj).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.orderList()
                        this.editLoading = false;
                        this.editUsersVisible = false;
                    });

                } else {
                    return false;
                }
            });
        },
       
        handleDelete(index, row) {
             this.$confirm("确认删除该机构列表么?", "提示", {})
                .then(() => {
                    this.$http('/sys/deleteOrganization', { data: { id: row.id } }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.orderList();
                    })
                })
                .catch(() => { });
        }
       
    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}

.addcity .area-select {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0
}

.addcity .area-select .area-selected-trigger {
    padding-top: 0;
    padding-bottom: 0
}

.addcity .area-select-wrap>div:first-child {
    margin-left: 0
}
</style>
